 <template>
    <div class="goods_list">
      <div class="goods_item" v-for="(item,index) in list" :key="index" :class="{'mr':index % 2 == 0}" @click="toGoodsDetail(item.id)" v-lockClick>
        <div class="goods_top">
          <!-- <img class="goods_img" v-lazy="item.icon"> -->
          <div class="goods_img_box" v-lazy:background-image="item.icon"></div>
          <div class="goods_tags" v-if="item.tagLabs">
            <span class="tag_item" v-for="(item,i) in item.tagLabs.split(',')" :key="i">{{item}}</span>
            <!-- <button class="tag_item" v-for="(item,i) in item.tagLabs.split(',')" :key="i">{{item}}</button> -->
          </div>
        </div>
        <div class="goods_name pf_m">{{item.title}}</div>
        <div class="goods_price px1bb">
          <span class="present_price pf_m"><i>￥</i>{{item.price}}</span>
          <span class="original_price" v-if="item.originalPrice">￥{{item.originalPrice}}</span>
        </div>
        <div class="seller_msg">
          <div class="left">
            <img class="seller_avatar" :src="item.userIcon || require('../../../assets/imgs/common/default_avatar.png')">
            <span class="seller_name">{{item.nickName || item.userName}}</span>
            <img class="icon_auth" v-if="item.authStatus == 'Y'" src="~@/assets/imgs/common/icon_auth.png">
          </div>
          <!-- <div class="right" v-if="item.authStatus == 'Y'">
             <img class="icon_diamonds" src="~@/assets/imgs/common/icon_diamonds.png">
             <span class="seller_tag">信用认证</span>
          </div> -->
        </div>
      </div>
    </div>
</template>

<script>

import {mapState,mapActions} from 'vuex';
import native from '@/libs/native/index';
export default {
  props: {
    list:{
       type:Array,
       default(){
           return [];
       }
    },
    clickTo:{
       type:Function,
       required:false
    }
  },
  components:{
  
  },
  data() {
    return {}
  },
  computed: mapState({
    
  }),
  created() {
  
  },

  methods: {
    ...mapActions(['toggleLoading','showMsg','showModal']),
    toGoodsDetail(id){
      if(this.clickTo){
        this.clickTo(id);
      }else{
        native.goGoodsDetail(id);
      }
    }
  }
}
</script>

<style lang="less" scoped>
.goods_list{
  display: flex;
  flex-wrap: wrap;
  .goods_item{
    width: 3.46rem;
    height: 5.74rem;
    background-color: #fff;
    border-radius: 0.16rem;
    margin-bottom: 0.2rem;
    overflow: hidden;
    &.mr{
       margin-right: 0.18rem;
    }
    .goods_top{
      width: 3.46rem;
      height: 3.46rem;
      position: relative;
      overflow: hidden;
      //  background-color: #888;
      .goods_img{
        position: absolute;
        // top:0;
        // left: 50%;
        // transform: translateX(-50%);
        left: 0;
        top:50%;
        transform: translateY(-50%);
        width: 3.46rem;
        height: auto;
        // width: auto;
        // height: 3.46rem;
      }
      .goods_img_box{
        width: 3.46rem;
        height: 3.46rem;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
      }
      .goods_tags{
        position: absolute;
        padding:0.2rem;
        transform:scale(0.5,0.5);
        transform-origin: left bottom;
        bottom: 0;
        left: 0;
        display: flex;
        .tag_item{
           padding:0.08rem 0.12rem;
           border-radius:0.08rem;
           font-size: 0.4rem;
           line-height: 0.48rem;
           color: #fff;
           margin-right: 0.12rem;
           background-color: rgba(255,153,0,0.8);
           white-space: nowrap;
        }
      }
      // .goods_tags{
      //   position: absolute;
      //   padding:0.1rem;
      //   bottom: 0;
      //   left: 0;
      //   display: flex;
      //   .tag_item{
      //      padding:0 0.06rem;
      //      height: 0.32rem;
      //      border-radius:0.04rem;
      //      font-size: 0.2rem;
      //      line-height: 0.24rem;
      //      color: #fff;
      //      margin-right: 0.06rem;
      //      background-color: rgba(255,153,0,0.8);
      //      white-space: nowrap;
      //   }
      // }
    }
    .goods_name{
      margin:0.16rem 0.16rem 0.12rem 0.16rem;
      font-size: 0.26rem;
      // font-weight: bold;
      color: #333;
      line-height: 0.37rem;
      height: 0.72rem;
      overflow: hidden;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .goods_price{
       padding-bottom: 0.12rem;
       margin:0 0.16rem;
       display: flex;
       align-items: flex-end;
      .present_price{
        // font-family: din-bold;
        font-size: 0.32rem;
        color: #FF4238;
        line-height: 0.44rem;
        margin-right: 0.1rem;
        display: flex;
        align-items: flex-end;
        
        i{
          font-style: normal;
          font-size: 0.24rem;
          line-height: 1.6;
        }
      }
      .original_price{
         font-size: 0.22rem;
         color: #ccc;
         line-height: 0.36rem;
         position: relative;
         &::after{
             content: '';
             position: absolute;
             top:0.15rem;
             width: 100%;
             height: 0.02rem;
             background-color: #ccc;
             left: 0;
         }
      }

    }
    .seller_msg{
      padding:0.16rem 0.16rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        display: flex;
        align-items: center;
        .seller_avatar{
          width: 0.4rem;
          height: 0.4rem;
          margin-right: 0.1rem;
          border-radius: 0.2rem;
        }
        .seller_name{
          font-size: 0.22rem;
          color: #333;
          line-height: 0.28rem;
        }
        .icon_auth{
          width: 0.22rem;
          height: 0.24rem;
          margin-left: 0.04rem;
        }
      }
      .right{
        height: 0.28rem;
        display: flex;
        align-items: center;
        padding:0 0.04rem;
        background-color: #f3fcf8;
        border-radius: 0.04rem;
        .icon_diamonds{
          width: 0.18rem;
          height: 0.16rem;
          margin-right: 0.04rem;
        }
        .seller_tag{
          font-size: 0.2rem;
          line-height: 0.24rem;
          color: #14C877;
        }
      }
    }
  }
}
</style>
